<script setup lang="ts">
import { Page, useVbenModal } from '@vben/common-ui';

import { Button as AButton, Space } from 'ant-design-vue';

import { useVbenVxeGrid, withDefaultTableConfig } from '#/adapter';
import { getUserList } from '#/api';

import { columns } from './data';
import Form from './form.vue';

const [Table, tableApi] = useVbenVxeGrid(
  withDefaultTableConfig({
    columns,
    proxyConfig: {
      ajax: {
        query: async ({ page }, { formValues }) => {
          return await getUserList({
            index: page.currentPage,
            size: page.pageSize,
            ...formValues,
          });
        },
        querySuccess() {},
      },
    },
  })
    .withTableTitle({
      tableTitle: '表格标题',
    })
    .build(),
);

const [FormModal, modelApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: Form,
});
</script>

<template>
  <Page auto-content-height>
    <Table>
      <template #toolbar-tools>
        <Space>
          <AButton type="primary" @click="modelApi.open"> 新增 </AButton>
        </Space>
      </template>
    </Table>
    <FormModal />
  </Page>
</template>

<style scoped></style>
